<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        #box{
            width: 750px;
            height: 400px;
            border: 5px solid skyblue;
            margin: 100px auto;

            /*超出内容隐藏*/
            overflow: hidden;

            position: relative;
        }
        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }
        #to_top,#to_bottom{
            width: 100%;
            height: 50%;
            /* background-color: #fff; */
            position: absolute;
            left: 0;
            cursor: pointer;
        }
        #to_top{
            top: 0;
        }
        #to_bottom{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <img id="pic" src="./img/timg.jpg" alt="">
        <span id="to_top"></span>
        <span id="to_bottom"></span>
    </div>

    <script>
        window.addEventListener('load',()=>{
            let timer = null,num = 0;
            //----------------鼠标进入---------
            //向上
            $('to_top').addEventListener('mouseenter',function(){
                //清除定时器
                clearInterval(timer);

                //设置定时器
                timer = setInterval(function(){
                    //步长
                    num -= 10;

                    //判断
                    if(num > -2466){
                        $('pic').style.top = num + 'px';
                    }else{
                        clearInterval(timer);
                    }
                },100)
            })
            //向下
            $('to_bottom').addEventListener('mouseenter',function(){
                //清除定时器
                clearInterval(timer);

                //设置定时器
                timer = setInterval(function(){
                    //步长
                    num += 10;

                    //判断
                    if(num < 0){
                        $('pic').style.top = num + 'px';
                    }else{
                        clearInterval(timer);
                    }
                },100)
            });

            //-----------鼠标离开-------------
            $('box').addEventListener('mouseout',function(){
                clearInterval(timer);
            })
        });
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null; 
        }
    </script>
</body>
</html>